<template>
	<div class="commends" v-if="showCommend">
		 <div class="title">
		 	热门推荐
		 </div>
		 <ul >
		 	<!--将li替换成router-link 可以避免浏览器将其渲染成a标签，加上tag='li' 会渲染成li标签-->
		 	<router-link tag="li"
		 		class="item-commend"
		 		v-for="item of commendList" 
		 		:key="item.id"
		 		:to="'/detail/'+item.id"
		 	>
		 		<img class="item-img" :src="item.imgSrc"/>
		  	<div class="commend-info">
			  	<p class="commend-title">{{item.title}}</p>
			  	<p class="item-commend-info">{{item.info}}</p>
			  	<button class="look-info-btn">查看详情</button>
		  	</div>
		 	</router-link>
		 </ul>
	</div>
</template>

<script>
export default{
	name: 'homeCommends',
	props:{
		commendList:Array
	},
	computed:{
		showCommend () {
			return this.commendList.length
		}
	}
}
</script>

<style lang="stylus" scoped>
  @import "~styles/mixins.styl";
	.title
	  height:.8rem
	  line-height:.8rem
	  text-indent:.2rem
	  margin:.1rem 0
	  background:#eee
		.item-commend
			margin-top:.1rem
			height:1.9rem
			.item-img
				width:1.7rem
				height:1.7rem
				padding:.1rem
				float:left
			.commend-info
			  flex:1
			  padding:.1rem
			  min-width:0
			  .commend-title
			  	font-weight:border
			  	font-size:.32rem
			  	line-height:.54rem
			  	ellipsis()
			  .item-commend-info
			  	line-height:.4rem
			  	font-size:.26rem
			  	color:#ccc
			  	ellipsis()
			  .look-info-btn
			  	margin-top:.2rem
			  	background:#ff9300
			  	border-radius:0.1rem
			  	border:0px solid #ff9300
			  	line-height:0.5rem
			  	color:#fff
			  	font-size:.26rem
			  	float:right
			
	
</style>